<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>好味道</title>
    <link rel="icon" href="./images/favicon.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./js/base.js"></script>

    <script src="http://at.alicdn.com/t/c/font_4120520_u9cxfccbwh.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../backend/plugins/element-ui/index.css" />
    <!--引入vant样式-->
    <link rel="stylesheet" href="styles/vant.min.css"/>

    <link rel="stylesheet" href="./tubiao/font_4120520_f7qq4j1dvrj/iconfont.css"/>


    <style>
        body{
            width: 100%;
            height: 100%;
        }
        .icon {
            width: 45px;
            height: 45px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .top{
            height: 25px;
            line-height: 25px;
            margin-top: 10px;
        }
        .dizhi{
            float:left;
            margin-left: 13px;
            font-size: 15px;
            font-weight: 600;
        }
        .top .two,
        .top .one{
            float: right;
            font-size: 25px;
            margin: 0 10px;
            line-height: 25px;
        }
        .search{
            margin-bottom: 10px;
        }
        .daohang{
            display: flex;
            flex-wrap:wrap;
            margin-top: 15px;
        }
        .daohang .icon{
            margin: 0 24px;
        }
        .daohang .box{
            display: flex;
            flex-direction:column;
            text-align: center;
            margin-bottom: 10px;
        }
        img {
            width: 100%;
        }
        .shop .box {
            position: relative;
            padding: 10px;
            height: 115px;
            background: #ffffff;
            border-radius: 10px;
        }
        .shop .box .imgs{
            float: left;
            width: 115px;
            height: 115px;
            border-radius: 10px;
            overflow: hidden;
        }
        .shop .box .text{
            float: left;
            margin-left: 10px;
        }

        .shop .box .text .spans{
            height: 15px;background:#c57b35;display: inline-block;padding: 0 3px;border-radius: 4px
        }
        .shop .box .text .youhui div{
            height: 15px;
            border: 1px #ee0a24 solid;
            display: inline-block;
            padding: 0 3px;
            border-radius: 4px;
            color:#de0404;
        }
        .shop .box .text .postion{
            position: absolute;
            right: 10px;
            top: 40px;
        }
        body{
            background: #f8f8f8;
        }
    </style>
</head>
<body>
<div id="main">
    <div class="top">
        <span class="dizhi">{{defaultDz}}...     <van-icon name="arrow-down" /></span>
        <van-icon class="one" name="cart-o" />
        <van-icon class="two" name="comment-o" />
    </div>
    <div class="search">
        <van-search  :value="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="wap">
        <div class="block">
            <el-carousel trigger="click" height="150px">
                <el-carousel-item v-for="(item,index) in imgUrl" :key="index">
                    <img :src="item.url" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
    <div class="daohang">
     <div @click="inconfbtn(index)" class="box" v-for="(item,index) in icon":key="index">
         <svg class="icon" aria-hidden="true" >
             <use :xlink:href="item.url"></use>
         </svg>
         <span>{{item.name}}</span>
     </div>
    </div>
    <div class="shop">
    <div class="box">
        <div class="imgs">
            <img src="images/logo.jpg">
        </div>
        <div class="text">
            <span class="postion">60分钟 1.8km</span>
            <p style="font-weight: 600;font-size: 15px;margin: 0">好味道(珠海店)</p>
            <p style="margin-top: 5px"><span style="font-weight: 600;color:#daaa43;font-size: 15px;margin-right: 5px">5.1分</span>月销量700+</p>
            <p style="margin-top: 5px">起送￥13 配送费￥0.5</p>
            <p style="margin-top: 5px"> <span class="spans">味道好极了</span></p>
            <div class="youhui" style="margin-top: 5px">
                <div>33减2 66减5</div>
                <div>33减2 66减5</div>
            </div>

        </div>
    </div>

</div>
</div>


<script src="../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../backend/plugins/axios/axios.min.js"></script>
<!--引入阿里组件库-->
<!--<script src="tubiao/font_4120520_f7qq4j1dvrj/iconfont.js"></script>-->
<script src="./js/jquery-2.1.0.js"></script>

<script>
    new Vue({
        el:'#main',
        data(){
            return {
                imageURL:"images/img/null5688a4b1f76d7e02.jpg",
                value:"",
                defaultDz:"广东科学技术职业学院",
                imgUrl:[
                    {url:"images/img/1.jpg"},
                    {url:"images/img/2.jpg"},
                    {url:"images/img/3.jpg"},
                    {url:"images/img/4.jpg"}
                ],
                icon:[
                    {name:"湘菜",url:"#icon-meishi1"},
                    {name:"牛子餐",url:"#icon-meishi2"},
                    {name:"川菜",url:"#icon-meishi"},
                    {name:"牛马餐",url:"#icon-meishi_li"},
                    {name:"粤菜",url:"#icon-meishi_hetao"},
                    {name:"商务",url:"#icon-meishi_niunai"},
                    {name:"客家菜",url:"#icon-meishi_songzi"},
                    {name:"儿童餐",url:"#icon-meishi_tusi"},
                    {name:"冒菜",url:"#icon-meishi_zhenzi"},
                    {name:"饮品",url:"#icon-meishi_yaoguo"},
                    {name:"主食",url:"#icon-chicken-meat"},
                    {name:"变态菜",url:"#icon-meishi-"},
                ]
            }
        },
        methods:{
            inconfbtn(index){
                // console.log("123")
                window.location.href="./index.html?item="+index;
            }
        },
        computed:{

        },
        created(){

        },
        mounted(){

        },
    })
</script>

</body>
</html>